<template>
  <!--放大镜效果-->
  <div class="preview">
    <div class="jqzoom">
      <img :src="bigImg" />
    </div>
    <!-- 遮罩 -->
    <div class="mask_view" @mousemove="mouseChange" />
    <div class="mask" ref="REFmask" />
    <!-- 大图 -->
    <div class="maxbox">
      <img ref="REFbigImg" :src="bigImg" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Zom',
  computed: {
    ...mapState('detail', ['bigImg']),
  },
  methods: {
    mouseChange(e) {
      const mask = this.$refs.REFmask
      const bigImg = this.$refs.REFbigImg
      let maskX = e.offsetX - mask.offsetWidth / 2
      let maskY = e.offsetY - mask.offsetHeight / 2
      if (maskX <= 0) maskX = 0
      if (maskY <= 0) maskY = 0
      if (maskX >= mask.offsetWidth) maskX = mask.offsetWidth
      if (maskY >= mask.offsetHeight) maskY = mask.offsetHeight
      mask.style.left = maskX + 'px'
      mask.style.top = maskY + 'px'
      bigImg.style.left = -2 * maskX + 'px'
      bigImg.style.top = -2 * maskY + 'px'
    },
  },
}
</script>

<style lang="scss" scoped>
.preview {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #dfdfdf;
  .jqzoom {
    cursor: pointer;
    width: 400px;
    height: 400px;
    position: relative;
    img {
      width: 100%;
    }
  }
  .mask_view {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 99;
    &:hover ~ .mask,
    &:hover ~ .maxbox {
      display: block;
    }
  }
  .mask {
    display: none;
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0px;
    top: 0px;
    border: 1px solid #ddd;
  }
  .maxbox {
    display: none;
    width: 400px;
    height: 400px;
    position: absolute;
    left: 420px;
    top: 0px;
    overflow: hidden;
    z-index: 20;
    border: 1px solid #ddd;
    img {
      display: block;
      width: 800px;
      height: 800px;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  }
}
</style>
